---
title: Next.js - Installation Guide
description: Learn how to use Material Tailwind components with Next.js and Tailwind CSS to easily create elegant and flexible pages.
navigation:
  [
    "installation",
    "npm",
    "yarn",
    "pnpm",
    "tailwindcss-config",
    "with-server-components",
    "with-monorepo",
    "theme-provider",
    "example",
  ]
github: guide/next
prev: installation
next: license
---

# Material Tailwind with Next.js

<span id="installation" className="scroll-mt-48" />
Learn how to setup and install @material-tailwind/react with Next.js.

<br />
<br />

First, create a new Next.js project using the command below. When asked if you want to use Tailwind CSS with your project, select "Yes" so that it's automatically installed and set up for you. For more details check the <a target="_blank" className="font-medium hover:text-blue-500 transition-colors" href="https://nextjs.org/docs/getting-started/installation?ref=material-tailwind">Next.js Official Documentation</a>.

```bash
npx create-next-app@latest
```

<br />

If you have an existing Next.js project and need to install Tailwind CSS manually, check the guide in the <a href="https://tailwindcss.com/docs/guides/nextjs?ref=material-tailwind" target="_blank" className="font-medium hover:text-blue-500 transition-colors">Tailwind CSS documentation</a>.

---

<DocsTitle href="npm">
## Using NPM
</DocsTitle>

Install @material-tailwind/react as a dependency using NPM by running the following command:

<span id="npm" className="scroll-mt-48" />

```bash
npm i @material-tailwind/react
```

---

<DocsTitle href="yarn">
## Using Yarn
</DocsTitle>

Install @material-tailwind/react as a dependency using Yarn by running the following command:

<span id="yarn" className="scroll-mt-48" />

```bash
yarn add @material-tailwind/react
```

---

<DocsTitle href="pnpm">
## Using PNPM
</DocsTitle>

Install @material-tailwind/react as a dependency using PNPM by running the following command:

<span id="pnpm" className="scroll-mt-48" />

```bash
pnpm i @material-tailwind/react
```

---

<DocsTitle href="tailwindcss-config">
## Tailwind CSS Configuration
</DocsTitle>

<span id="tailwindcss-config" className="scroll-mt-48" />

Once you install @material-tailwind/react, you need to wrap your Tailwind CSS configuration with the <Code>withMT()</Code> function from @material-tailwind/react/utils in your <Code>tailwind.config.js</Code> file.

```js {1, 3, 9}
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: ["./pages/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
});
```

---

<DocsTitle href="with-server-components">
## With Next.js 13 App Router and Server Components
</DocsTitle>

<span id="with-server-components" className="scroll-mt-48" />

If you want to use @material-tailwind/react with the Next.js 13 App Router, you need to make use of the <br /> <Code>'use client'</Code> directive since many Material Tailwind components can only be rendered on the client side. A simple approach is to re-export or wrap Material Tailwind components in your own components.

```js
"use client";

import { ThemeProvider, Button } from "@material-tailwind/react";

export { ThemeProvider, Button };
```

<br />
<br />

Once you've re-exported or wrapped any Material Tailwind components you need, simply point all imports to the new files.

```js
// ❌ invalid - this will not work on the client side
import { Button } from "@material-tailwind/react";

// ✅ valid - this will work on the client side
import { Button } from "path/to/the/new/file";
```

---

<DocsTitle href="with-monorepo">
## TailwindCSS Configurations with MonoRepo
</DocsTitle>

<span id="with-monorepo" className="scroll-mt-48" />

If you're using monorepo in your project you need to add the theme and components paths to your tailwind.config.js.

```js {6,7}
const withMT = require("@material-tailwind/react/utils/withMT");

module.exports = withMT({
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/components/**/*.{js,ts,jsx,tsx}",
    "path-to-your-node_modules/@material-tailwind/react/theme/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
});
```

---

<DocsTitle href="theme-provider">
## Theme Provider
</DocsTitle>

<span id="theme-provider" className="scroll-mt-48" />

@material-tailwind/react comes with a theme provider that sets the default or custom theme/styles for Material Tailwind components. Wrap your entire application with the <Code>ThemeProvider</Code> component from @material-tailwind/react. The file to add this to depends on your Next.js setup:

With the App Router: <Code>app/layout</Code>  
With the Pages Router: <Code>pages/\_app</Code>

```jsx {3, 7, 9}
import "/styles/globals.css";

import { ThemeProvider } from "@material-tailwind/react";

export default function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
```

---

<DocsTitle href="example">
## Example
</DocsTitle>

Now you're good to go and use @material-tailwind/react in your project.

<CodePreview id="example" component={<Button>Button</Button>}>
```jsx
import { Button } from "@material-tailwind/react";

export default function Example() {
  return <Button>Button</Button>;
}
```
</CodePreview>